<template>
  <div class="view">
    <div class="right-table">
      <div class="container-top">编目信息配置</div>
      <div class="top-search">
        <div>
          <el-select
            v-model="filterParams.dataStatus"
            slot="prepend"
            placeholder="请选择"
            style="margin-right: 10px"
            @change="doSearch"
          >
            <el-option
              v-for="item in dataStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="searchUpdateTime"
            align="right"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="更新时间开始日期"
            end-placeholder="更新时间结束日期"
            @change="doSearch"
          ></el-date-picker>
        </div>
        <div style="display: flex">
          <el-input
            placeholder="请输入创建人搜索"
            v-model="filterParams.createBy"
            class="input-with-select"
            style="margin-right: 1rem"
          ></el-input>
          <el-input
            placeholder="请输入模板名称搜索"
            v-model="filterParams.catalogueName"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="doSearch"
            ></el-button>
          </el-input>
          <el-button
            type="primary"
            style="margin-left: 8px"
            plain
            @click="reset"
          >
            重置
          </el-button>
        </div>
      </div>
      <div class="top-operate">
        <auth-btn
          btn-id="btn_batch_del"
          type="danger"
          plain
          @click="handleBatchDel"
        >
          批量删除
        </auth-btn>
        <auth-btn
          btn-id="form_generate_add"
          icon="el-icon-plus"
          type="primary"
          @click="add"
        >
          新增模板
        </auth-btn>
      </div>
      <table-list
        ref="tableList"
        :data="listData"
        :column-cfg="columnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        :show-pagination="true"
        :current-page="pagination.pageNum"
        @selection-change="handleSelectionChange"
        select-type="multiple"
        @refresh-list="getList"
        @delete-item="handleDeleteItem"
        :handleSortfield="handleSortfield"
      >
        <template #dataStatus="{ row }">
          <el-switch
            :value="row.dataStatus"
            :active-value="1"
            @change="onChangedataStatus(row)"
            :inactive-value="0"
          ></el-switch>
        </template>
        <template v-slot:action="scope">
          <auth-link
            style="margin: 0 4px"
            link-id="btn_copy"
            title="复制"
            :underline="false"
            :type="'primary'"
            @click="handleCopyItem(scope.row)"
          >
            复制
          </auth-link>
          <auth-link
            v-if="scope.row.systemPreset !== 1 && scope.row.dataStatus !== 1"
            style="margin: 0 4px"
            link-id="btn_edit"
            title="编辑"
            :underline="false"
            :type="'primary'"
            @click="handleEditItem(scope.row)"
          >
            编辑
          </auth-link>
          <auth-link
            v-if="scope.row.systemPreset !== 1 && scope.row.dataStatus !== 1"
            style="margin: 0 4px"
            link-id="btn_del"
            title="删除"
            :underline="false"
            :type="'danger'"
            @click="handleDeleteItem(scope.row)"
          >
            删除
          </auth-link>
        </template>
      </table-list>
    </div>
  </div>
</template>
<script>
import TableList from '@/components/TableList/index';
import ListAction from '@/views/_mixins/list-action';
import {
  list as commonList,
  catalogueCopy,
  catalogueStatusChange,
  batchDelete
} from '@/api/system-config/catalogue';
import AuthBtn from '@/components/AuthBtn';
import AuthLink from '@/components/AuthLink';
const defaultSearchParams = {
  dataStatus: '',
  updateTime: '',
  catalogueName: '',
  createBy: ''
};
export default {
  name: 'mediaRecycle',
  mixins: [ListAction],
  components: {
    TableList,
    AuthBtn,
    AuthLink
  },
  data() {
    return {
      list: commonList,
      dataStatusOptions: [
        {
          label: '全部状态',
          value: ''
        },
        {
          label: '启用',
          value: 1
        },
        {
          label: '禁用',
          value: 0
        }
      ],
      filterParams: { pageSize: 10, ...defaultSearchParams },
      listData: [],
      columnCfg: {
        catalogueName: { label: '模板名称', align: 'left' },
        createByName: {
          label: '上传人',
          align: 'left'
        },
        updateTime: { label: '更新时间 ', align: 'left', sortable: 'custom' },
        dataStatus: {
          label: '状态',
          width: '100',
          align: 'left',
          slotName: 'dataStatus'
        },
        remark: { label: '备注 ', align: 'left' },
        action: {
          label: '操作',
          width: '120',
          align: 'left',
          slotName: 'action',
          actionArr: [
            {
              label: '复制',
              link_id: 'btn_copy'
            },
            {
              label: '编辑',
              link_id: 'btn_edit'
            },
            {
              label: '删除',
              link_id: 'btn_del'
            }
          ]
        }
      },
      SortfieldMap: {
        updateTime: {
          key: 'orderByClause',
          ascending: 'updateAsc',
          descending: 'updateDesc'
        }
      }
    };
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  computed: {
    searchUpdateTime: {
      get() {
        return this.filterParams.updateTime
          ? this.filterParams.updateTime.split(',')
          : [];
      },
      set(v) {
        this.filterParams.updateTime = v ? `${v[0]},${v[1]}` : '';
      }
    }
  },
  activated() {
    this.$first ? this.getList() : (this.$first = true);
  },
  methods: {
    /**
     * 删除行记录
     * @param row
     */
    handleDeleteItem(row) {
      this.$confirm('删除编目，请谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn',
        confirmButtonClass: 'confirm-msgbtn',
        type: 'warning'
      }).then(() => {
        batchDelete(row.catalogueId).then(res => {
          this.$message.success('删除编目成功');
          this.getList();
        });
      });
    },
    handleBatchDel() {
      if (this.multipleSelection.length > 0) {
        if (
          this.multipleSelection.filter(
            i => i.systemPreset === 1 || i.dataStatus === 1
          ).length
        ) {
          this.$message.error('存在预设或者启用的编目，无法删除');
          return;
        }
        this.$confirm('确定删除选中编目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-msgbtn',
          confirmButtonClass: 'confirm-msgbtn',
          type: 'warning'
        }).then(() => {
          let ids = this.multipleSelection
            .map(ele => ele.catalogueId)
            .join(',');
          batchDelete(ids).then(res => {
            this.$message.success('清空选中编目成功');
            this.getList();
          });
        });
      } else {
        this.$message.warning('未选择任何编目');
      }
    },
    resestPageList() {
      this.filterParams.pageNum = 1;
      this.pagination.pageNum = 1;
    },
    doSearch() {
      this.resestPageList();
      this.getList();
    },
    handleDetailItem(row) {
      // this.$parent.pButton2(1, row);
    },
    reset() {
      this.filterParams = {
        pageSize: this.filterParams.pageSize,
        ...defaultSearchParams
      };
      this.$refs.tableList.clearSort();
      this.doSearch();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add() {
      this.$router.push({ name: 'form-generate', query: { formType: '1' } });
    },
    handleEditItem(row) {
      this.$router.push({
        name: 'form-generate',
        query: { id: row.catalogueId, formType: '2' }
      });
    },
    handleCopyItem(row) {
      this.$confirm('确定要复制该项目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn',
        confirmButtonClass: 'confirm-msgbtn',
        type: 'warning'
      }).then(() => {
        catalogueCopy(row.catalogueId).then(res => {
          this.$message.success('删除编目成功');
          this.getList();
        });
      });
    },
    onChangedataStatus(row) {
      const tip = row.dataStatus === 1 ? '禁用' : '启用';
      const color = row.dataStatus === 1 ? '#f78989' : '#67C23A';
      const dataStatus = row.dataStatus === 1 ? 0 : 1;
      const h = this.$createElement;
      const msg = h('p', null, [
        '是否确定',
        // h("span", { style: `color: ${color}` }, tip),
        h('span', {}, tip)
      ]);
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn',
        confirmButtonClass: 'confirm-msgbtn',
        type: 'warning'
      }).then(() => {
        catalogueStatusChange(row.catalogueId, dataStatus).then(() => {
          this.$message.success(`${tip}成功`);
          this.getList();
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .right-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 16px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
    .top-search,
    .top-operate {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep .el-input-group__prepend {
  width: 150px !important;
}
::v-deep .el-alert--warning.is-light {
  background-color: #fff;
  color: #f56c6c;
  width: 500px;
  height: 32px;
}
.container-top {
  height: 56px;
  line-height: 56px;
  font-weight: bold;
  font-size: 20px;
}
</style>
